import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp"

import {
   InputOTP,
   InputOTPGroup,
   InputOTPSlot,
} from "~/registry/miami/ui/input-otp"

export default function InputOTPPattern() {
   return (
      <InputOTP
         maxLength={6}
         pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
         inputMode="text"
         spellCheck="false"
      >
         <InputOTPGroup>
            <InputOTPSlot index={0} />
            <InputOTPSlot index={1} />
            <InputOTPSlot index={2} />
            <InputOTPSlot index={3} />
            <InputOTPSlot index={4} />
            <InputOTPSlot index={5} />
         </InputOTPGroup>
      </InputOTP>
   )
}
